import React, { useState, useEffect } from 'react';
import { Card, Input, Select, Empty, Spin, List, Tag, Progress } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { history } from '@umijs/max';
import { getActivityPage, ActivityInfo } from '@/services/ActivityService';
import { famousPersonId } from '@/services';
import dayjs from 'dayjs';
import styles from './index.less';

const { Option } = Select;

// 活动类型配置
const ActivityType = {
    ONLINE: { value: 1, text: '线上活动', color: 'blue' },
    OFFLINE: { value: 2, text: '线下活动', color: 'green' },
    LIVE: { value: 3, text: '直播活动', color: 'purple' },
};

// 活动状态配置
const ActivityStatus = {
    NOT_STARTED: { value: 0, text: '未开始', color: 'default' },
    IN_PROGRESS: { value: 1, text: '进行中', color: 'processing' },
    ENDED: { value: 2, text: '已结束', color: 'success' },
    CANCELED: { value: 3, text: '已取消', color: 'error' },
};

const ActivityList: React.FC = () => {
    const [loading, setLoading] = useState(false);
    const [activities, setActivities] = useState<ActivityInfo[]>([]);
    const [total, setTotal] = useState(0);
    const [current, setCurrent] = useState(1);
    const [keyword, setKeyword] = useState('');
    const [type, setType] = useState<number>();
    const [status, setStatus] = useState<number>();

    const loadData = async (page = current) => {
        try {
            setLoading(true);
            const response = await getActivityPage({
                pageCurrent: page,
                pageSize: 16,
                famousPersonId,
                keyword,
                type,
                status,
            });
            setActivities(response.list);
            setTotal(response.totalCount);
            setCurrent(page);
        } catch (error) {
            console.error('Failed to fetch activities:', error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        loadData(1);
    }, [keyword, type, status]);

    const handleSearch = (value: string) => {
        setKeyword(value);
    };

    const renderActivityItem = (item: ActivityInfo) => {
        const typeInfo = Object.values(ActivityType).find(t => t.value === item.type);
        const statusInfo = Object.values(ActivityStatus).find(s => s.value === item.status);

        return (
            <List.Item
                key={item.id}
                className={styles.activityItem}
                onClick={() => history.push(`/activity/${btoa(item.id?.toString() || '')}`)}
            >
                <Card
                    hoverable
                    className={styles.activityCard}

                >
                    <Card.Meta
                        title={item.title}
                        description={
                            <div className={styles.cardContent}>
                                <div className={styles.tags}>
                                    <Tag color={typeInfo?.color}>{typeInfo?.text}</Tag>
                                    <Tag color={statusInfo?.color}>{statusInfo?.text}</Tag>
                                </div>
                                <div className={styles.description}>{item.description}</div>
                                <div className={styles.info}>
                                    <div className={styles.time}>
                                        <span>活动时间:</span>
                                        {dayjs(item.startTime).format('YYYY-MM-DD HH:mm')} 至{' '}
                                        {dayjs(item.endTime).format('YYYY-MM-DD HH:mm')}
                                    </div>
                                    {item.location && (
                                        <div className={styles.location}>
                                            <span>活动地点:</span>
                                            {item.location}
                                        </div>
                                    )}
                                    {item.registrationDeadline && (
                                        <div className={styles.deadline}>
                                            <span>报名截止:</span>
                                            {dayjs(item.registrationDeadline).format('YYYY-MM-DD HH:mm')}
                                        </div>
                                    )}
                                </div>
                                {item.maxParticipants && (
                                    <Progress percent={item.currentParticipants || 0 / item.maxParticipants} />
                                )}
                            </div>
                        }
                    />
                </Card>
            </List.Item>
        );
    };

    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <div className={styles.title}>活动中心</div>
                <div className={styles.filters}>
                    <Input
                        placeholder="搜索活动"
                        allowClear
                        prefix={<SearchOutlined />}
                        onChange={e => handleSearch(e.target.value)}
                        style={{ width: 200 }}
                    />
                    <Select
                        placeholder="活动类型"
                        allowClear
                        onChange={value => setType(value)}
                        style={{ width: 120 }}
                    >
                        {Object.values(ActivityType).map(type => (
                            <Option key={type.value} value={type.value}>
                                {type.text}
                            </Option>
                        ))}
                    </Select>
                    <Select
                        placeholder="活动状态"
                        allowClear
                        onChange={value => setStatus(value)}
                        style={{ width: 120 }}
                    >
                        {Object.values(ActivityStatus).map(status => (
                            <Option key={status.value} value={status.value}>
                                {status.text}
                            </Option>
                        ))}
                    </Select>
                </div>
            </div>

            <Spin spinning={loading}>
                <List
                    grid={{
                        gutter: 1,
                        xs: 1,
                        sm: 2,
                        md: 2,
                        lg: 3,
                        xl: 4,
                        xxl: 4,
                    }}
                    dataSource={activities}
                    renderItem={renderActivityItem}
                    pagination={{
                        current,
                        pageSize: 16,
                        total,
                        onChange: loadData,
                        showSizeChanger: false,
                    }}
                    locale={{
                        emptyText: <Empty description="暂无活动" />,
                    }}
                />
            </Spin>
        </div>
    );
};

export default ActivityList; 